<template>
  <div style="margin: 20px">
    <div style="font-size: 16px; font-weight: bold; margin-top: 20px">
      批量导入：
    </div>
    <el-divider/>
    <el-form ref="importFormRef" :model="importForm" :rules="rules" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="点击此处下载模板">
            <a hidden="hidden" ref="downloadTemplateLink" :href="downloadTemplateHref"></a>
            <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="选择数据文件" prop="upload">
            <el-upload
                ref="upload"
                class="upload-demo"
                :action="uploadAction"
                :data="importForm"
                :limit="1"
                :on-change="handleFileChange"
                :on-remove="handleFileRemove"
                :on-exceed="handleExceed"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :auto-upload="false"
            >
              <template #trigger>
                <el-button type="primary">选择文件</el-button>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="warning" @click="importData(importFormRef)">开始导入</el-button>
      </el-form-item>
    </el-form>


    <el-text class="mx-1" type="danger">这里是导入记录表格，可以下载导入结果文件，暂时不做了，后面再说</el-text>
  </div>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import base from '@/api/base.js';
import {ElMessage, ElMessageBox, UploadInstance, UploadProps, UploadRawFile} from 'element-plus'
import {genFileId} from 'element-plus'

const upload = ref<UploadInstance>()

const importFormRef = ref({})
const importForm = ref({
  belongYear: null,
  currentYear: 1,
  upload: null,
})
const params = ref({
  belongYear: '',
  currentYear: 1,
})
const rules = ref({
  upload: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请上传文件'));
        }
        callback();
      },
      trigger: 'blur',
    },
  ],
})

const downloadTemplateLink = ref(null);
const downloadTemplateHref = `${base.context}/file/download/salaryLevelTemplate`
const uploadAction = `${base.context}/salaryLevel/importSalaryLevel`

const downloadTemplate = () => {
  downloadTemplateLink.value.click();
}

const handleFileChange = (file, fileList) => {
  importForm.value.upload = file.raw;
};
const handleFileRemove = () => {
  importForm.value.upload = null;
};
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const uploadSuccess = () => {
  ElMessageBox.confirm(
      '提交成功，进入后台导入，导入成功后可下载结果文件?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '关闭',
        type: 'info',
      }
  )
}

const uploadError = (err, file, fileList) => {
  debugger
  const tipMessage = ref<String>('导入失败')
  if (err && err.message) {
    const errObject = JSON.parse(err.message);
    tipMessage.value = errObject.message
  }

  ElMessageBox.confirm(
      tipMessage.value,
      '失败',
      {
        confirmButtonText: '确认',
        cancelButtonText: '关闭',
        type: 'error',
      }
  )
}

const importData = (formEl) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      upload.value!.submit()
    } else {
      ElMessage.error('未选择excel文件(xls、xlsx)')
    }
  })
}


</script>

<style scoped>

</style>